<!DOCTYPE html>


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jquery -->
    <script src="../../frame/semanticUI/jquery.min.js"></script>
    <!-- CDN引入semanticUI框架 -->
    <link rel="stylesheet" type="text/css" href="../../frame/semanticUI/UI-master/semantic.min.css">
    <!-- semanticUI依赖于Jquery -->
    <script src="../../frame/semanticUI/UI-master/semantic.min.js"></script>

    <link rel="stylesheet" href="../../frame/elementUI/lib-master/theme-chalk/index.css"/>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../../frame/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="../../frame/elementUI/lib-master/index.js"></script>

    <link rel="stylesheet" href="../../css/back.css">
    <title>后台首页</title>

</head>
<script>
    $(function () {
        $('.ui.dropdown').dropdown({
            on: 'hover'
        });
    });
</script>
<body>
<div id="app">
    <!-- 导航 -->
    <nav class="ui inverted attached segment" style="padding-top: 5px;height: 70px;padding-left: 100px">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a href="../host/manage.html"  class="m-item item" ><i class="home icon"></i>博客</a>
            <a href="../type/types.html"  class="m-item item"><i class="idea icon"></i>分类</a>
            <a href="../record/archives.html"  class="m-item item" ><i class="clone icon"></i>归档</a>
            <a href="../tag/tags.html"  class="m-item item"><i class="tags icon"></i>标签</a>

            <div class="ui right floated dropdown item">
                <div class="text">
                    <img v-bind:src="admin.imgAvatar" class="ui avatar image">
                    <strong >{{admin.username}}</strong>
                </div>
                <i class="ui dropdown icon"></i>
                <div class="menu">
                    <a href="#" class="item">个人中心</a>
                    <a href="/user/logout" class="item">注销</a>
                </div>
            </div>
        </div>
    </nav>
    <!-- 中间内容 -->
    <div style="margin-top: 40px">
        <div class="ui container" style="width: 1000px">
            <div class="ui success large message">
                <h3 >{{admin.username}}</h3>
                <p>欢迎登陆！</p>
            </div>
            <img src="../../image/AZ.jpg" alt="" class="ui rounded bordered fluid image" style="height: 400px">
        </div>
    </div>


</div>
</body>
    <!-- axios -->
    <script src="../../frame/axios/axios.min.js"></script>
<script>

    Vue.config.productionTip=false  //以阻止 vue 在启动时生成生产提示。 <!-- 全局配置 -->
    new Vue({
        el:'#app',
        data:{
            admin:{
                username: '',
                imgAvatar: ''
            }

        },
        //钩子函数，VUE对象初始化完成后自动执行
        created(){
                this.findData();
        },
        methods:{
            //获取用户信息
            findData(){
                axios({
                    method: "GET",
                    url: "/user/gainData",
                }).then((res)=>{
                    console.log(res.data);
                    console.log(res.data.username);
                    if(res.data.username==''){

                    }else{
                        this.admin.username=res.data.username;
                        this.admin.imgAvatar=res.data.avatar;
                    }
                });
            }
        }
    });
</script>
</html>